<template>
    <!-- 寄回订单号 -->
    <u-popup closeable bgColor="transparent" :show="canReturnLogistics" @close="canReturnLogistics = false">
        <view class="return-logistics-pop">
            <view class="sales-content">
                <view class="title">
                    卖家已同意售后申请
                </view>
                <view class="status-box default">
                    <view class="name">寄回订单号</view>
                    <view class="">
                        <u--input inputAlign="center" placeholder="请输入订单号" border="none"></u--input>
                    </view>
                </view>
                <view class="content-box">
                    <view class="upload-box">
                        <u-upload
                          :fileList="images"
                          @afterRead="afterRead"
                          @delete="deletePic"
                          :multiple="false"
                          :maxCount="1"
                          :previewFullImage="true"
                        >
                            <u-image width="200rpx" height="200rpx" src="/static/images/upload.png"></u-image>
                        </u-upload>
                    </view>
                </view>
            </view>

            <view class="pay-btn">
                <u-button throttleTime="1000" :customStyle="{height: '86rpx', letterSpacing: '.1rem', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)'}" :hairline="false" type="mini"
                          shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" >确认</u-button>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
    import {ref} from "vue";
    import {getUploadToken, uploadImage} from "@/api/upload";

    const canReturnLogistics = ref(true)

    const images = ref([])

    const afterRead = async (event) => {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        images.value.push({
            ...event.file,
            status: 'uploading',
            message: '上传中'
        })
        console.log(event)

        const {code, data, message} = await getUploadToken()
        if (code !== 1) {
            uni.showModal({
                title: '提示',
                content: message ?? "获取上传token异常",
                showCancel: false,
                success: function (res) {
                }
            });
            return
        }

        const uploadRes = await uploadImage({file: event.file.url}, data.token)
        const uploadResData = JSON.parse(uploadRes)
        if (uploadResData.code === 1) {
            images.value.splice(event.index,1, Object.assign(event.file, {
                status: 'success',
                message: '',
                url: uploadResData.data.url,
                path: uploadResData.data.path
            }))
        }
        console.log(uploadResData)
    }

    const deletePic = (event) => {
        console.log(event)
        images.value.splice(event.index, 1)
        console.log(images.value)
    }
</script>

<style lang="scss" scoped>

.return-logistics-pop {
    background: #F5F6F8;
    box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153,153,153,0.16);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .sales-content {
        padding: 43rpx 40rpx;
    }
    .status-box {
        height: 200rpx;
        display: flex;
        align-items: center;
        padding-bottom: 32rpx;
        border-bottom: 1rpx solid #E8E8E8;
        margin-bottom: 30rpx;
    }
    .content-box {
        width: 100%;
        position: relative;
        font-size: 26rpx;
        color: #606672;
        .upload-box {
            margin-top: 30rpx;
            padding-bottom: 30rpx;
            .image-box {
                display: flex;
            }
        }
    }
    .default {
        padding-bottom: 0;
        border-bottom: none;
    // justify-content: flex-start;
        .name {
            margin-right: 36rpx;
        }
    }
    .pay-btn {
        background: #FFFFFF;
        padding: 15rpx 55rpx 23rpx;
        box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);

    }
}
</style>
